
<!--产品销售统计  -->
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
   <!-- 面包屑导航 -->
   <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品销售统计</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>

            <el-col :span="7" class="stsearch">
              <el-button size="small" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:1400px;height: 350px;">
          <div class="cavasbox" ref="trendchart"></div>
        </div>
      </el-col>
    
    
    </el-row>
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:1400px;height: 350px;">
          <div class="cavasbox" ref="saleschart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      // 销售趋势
      trendOption: {
        title: {  
          text: '销售趋势',  
          subtext: '2024年04月01-2024年04月10',  
          left: 'center'  
        },  
        tooltip: {  
          trigger: 'axis',  
          axisPointer: {  
            type: 'shadow'  
          }  
        },  
        legend: {  
          data: ['']  
        },  
        xAxis: {  
          type: 'category',  
          data: [
          '2024-04-01',
          '2024-04-02',
          '2024-04-03',
          '2024-04-04',
          '2024-04-05',
          '2024-04-06',
          '2024-04-07',
          '2024-04-08',
          '2024-04-09',
          '2024-04-10'
          ], // 时间数据
          boundaryGap: false  
        },  
        yAxis: {  
          type: 'value'  
        },  
        series: [  
          {  
            name: '销售额',  
            type: 'line',  
            data: [178,112,214,156,134,175,189,123,148,198], // 这里将是你的销售额数据列表  
            smooth: true  
          }  
        ]  

      },
       //  销售数量
       salesOption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售数量',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['有机富士苹果', '精选红心火龙果', '农家自产黄瓜', '新鲜有机生菜', '有机紫甘蓝', '香甜金帅苹果', '精选皇冠梨', '精选芒果', '有机西红柿', '有机土豆',],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售数量',
          type: 'bar',
          barGap: 0,
          data: [50, 30, 53, 62, 45, 31, 49, 29, 61, 48],
          barWidth: 10,
          itemStyle: {
            color: "#48cefd"
          }
        }]
      },
    
    
    }
  },
  created() { },
  mounted() {
    this.getTrend()
    this.getSales()

  },
  // 里面的函数只有调用才会执行
  methods: {
    //第一手术室
    getTrend() {
      this.chart = Chart.init(this.$refs.trendchart) //深色模式  ,'dark'
      this.chart.setOption(this.trendOption)
    },
    // 第二手术室
    getSales() {
      this.chart = Chart.init(this.$refs.saleschart)
      this.chart.setOption(this.salesOption)
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}

.stsearch {
  text-align: center;
}

.text-c {
  text-align: center;
}

.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>